<template>
  <div class="lawFirm">
    <Menus title="律所律师">
      <a @click="goback" href="javascript:void(0)" v-if="step>1">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhui.png" alt="返回">
        </div>
        <span>返回</span>
      </a>
      <router-link to="/" v-if="step>1">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhuishouye.png" alt="返回首页">
        </div>
        <span>返回首页</span>
      </router-link>
    </Menus>
    <div class="lawfirm-container">
      <div class="left">
        <div class="sider">
          <div class="ht">区域选择</div>
          <div class="area-content">
            <a :class="currentresidencecode == currentareacode ? 'btn btn-primary btn-lg' : 'btn btn-default btn-lg'" @click="changeResidence(currentareacode)">全部</a>
            <a :class="currentresidencecode == key ? 'btn btn-primary btn-lg' : 'btn btn-default btn-lg'" v-for="(value, key) in residence" :key="'key-'+key" @click="changeResidence(key)">{{ value.name }}</a>
            <a class="btn btn-default btn-lg" @click="show_select_areacode=true">其他州市</a>
          </div>
          <div class="ht">律所搜索</div>
          <div class="search-content">
            <input type="text" class="form-control input-lg" placeholder="请输入律所名称" v-model="searchlawfirm">
            <button type="submit" class="btn btn-primary btn-lg" @click="getSearchedLawFirm">搜索</button>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="lawfirm-list">
          <div class="result-ht" v-if="!search_flag">
            {{ currentresidencevalue }}一共有
            <strong>{{ currentlawfirmlist.length }}</strong>家律师事务所
          </div>
          <div class="result-ht" v-else>
            名称包含“{{ checkedlawfirm }}”的律师事务所一共有
            <strong>{{ currentlawfirmlist.length }}</strong>家
          </div>
          <a href="javascript:void(0)" class="item" v-for="(lawfirm, index) in currentlawfirmlist" :key="'key-'+index" @click="toLawfirmDetail(lawfirm)">
            <div class="content">
              <div class="name">{{ lawfirm.name }}</div>
              <div>{{ lawfirm.address }}<br> 电话：{{ lawfirm.tell }}</div>
            </div>
            <i class="glyphicon glyphicon-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="lawfirm-detail" v-if="step==1">
      <div class="content">
        <div class="name">{{ currentlawfirm.name }}</div>

        <div class="info" v-html="currentlawfirm.content">
        </div>
        <div class="more">
          <a href="javascript:void(0)" class="btn btn-primary" @click="step=2" v-if="currentlawfirm.content">律所详情</a>
        </div>
        <div class="contact">
          <div>

            {{ currentlawfirm.address }}

          </div>
          <div>

            电话：{{ currentlawfirm.tell }}</div>
        </div>
        <div class="ht">律所律师</div>

        <div class="lawyer-list">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4" v-if=" lawyer.tell " v-for="(lawyer, index) in currentlawyerlist" :key="'key-' + index">
                <a href="javascript:void(0)" class="item" @click="toLawyerDetail(lawyer)">
                  <div v-if="lawyer.url" class="imgs" :style="'background-image:url('+'https://yn.12348.laway.cn'+lawyer.url+')'"></div>
                  <div v-else class="imgs" style="background-image:url('static/img/lawyer_avatar.png')"></div>
                  <div class="c">
                    <div class="lawyer-name">{{ lawyer.name }}</div>
                    <div class="lawyer-tell">联系电话：{{ lawyer.tell }}</div>
                    <div class="lawyer-intro">
                      擅长专业：{{ lawyer.adept }}
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mask" @click="step=0"></div>
    </div>
    <div class="lawfirm-about" v-if="step==2">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="ht">{{ currentlawfirm.name }}</div>
            <div class="detail" v-html=" currentlawfirm.content ">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lawyer-about" v-if="step==3">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="lawyer">
              <div class="content">
                <div v-if="currentlawyer.url" class="imgs" :style="'background-image:url('+'https://yn.12348.laway.cn'+currentlawyer.url+')'"></div>
                <div v-else class="imgs" style="background-image:url('static/img/lawyer_avatar.png')"></div>
                <div class="intro">
                  <strong class="name">{{ currentlawyer.name }}</strong>
                  <div class="rate">
                    <div>
                      <template v-for="item in 5">
                        <i class="glyphicon glyphicon-star" :key="item" :class="{on:item<6}"></i>
                      </template>
                    </div>
                    <!-- <span>电话：{{ currentlawyer.tell }}</span> -->
                  </div>
                  <div class="lawfir">{{ currentlawfirm.name }}</div>
                </div>
                <div class="sc">
                  <ul>
                    <li>执业证号：{{ currentlawyer.no }}</li>
                    <li>执业年限：{{ currentlawyer.practice }}</li>
                    <li style="width:100%">擅长专业：{{ currentlawyer.adept }}</li>
                  </ul>
                </div>
              </div>
              <a href="javascript:void(0)" class="btn btn-success btn-zxls" @click="getLawyerTel">咨询该律师</a>
              <Dialogs v-model="dialog">
                <div class="lawyer-intro-rate">
                  <div class="lawyer-intro--info">
                    <div class="name">{{currentlawyer.name}} 律师</div>
                    <div class="tel">
                      咨询电话
                      <strong>{{currentlawyer.tell}}</strong>
                    </div>
                  </div>
                  <div class="lawyer-intro--tip">
                    咨询完成后可对律师服务进行评价打分
                  </div>
                  <div class="lawyer-intro--rates">
                    <Rate title="服务态度" v-model="rate.lawyer_attitude" />
                    <Rate title="专业度" v-model="rate.lawyer_quality" />
                  </div>
                </div>

                <template slot="foot">
                  <a :class="rate.lawyer_attitude>0 && rate.lawyer_quality>0 ? 'lp-btn large primary': 'lp-btn large default'" @click="updateRate">提交评价</a>
                  <a class="lp-btn large default" @click="closeRate">不评价</a>
                </template>
              </Dialogs>
              <div class="body" v-if="currentlawyer.content">
                <div class="ht">
                  律师简介
                </div>
                <div class="detail" v-html="currentlawyer.content">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="select_area" v-if="show_select_areacode">
      <div class="wrap">
        <div class="ht">请选择地区</div>
        <div class="content">
          <a v-for="(item,key) in $root.area" :key="'key-'+key" @click="getInitialItem(key)">
            <span>{{item.name}}</span>
          </a>
        </div>
      </div>
    </div>
    <Alert v-if="alert.show" :info="alert.info" :recall="alert.recall" @setClose="value=>alert.show=value" />
  </div>
</template>
<style lang="scss">
.select_area {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  .wrap {
    background: #fff;
    border-radius: 10px;
    width: 1200px;
    margin: 25px auto;
    padding: 35px;
    text-align: center;
    .ht {
      font-size: 28px;
      padding-bottom: 20px;
      color: #555;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      a {
        width: 33.33%;
        span {
          padding: 15px 0;
          display: block;
          font-size: 20px;
          background: #eee;
          margin: 0 10px 10px 0;
        }
      }
    }
  }
}
.lawyer-intro-rate {
  margin: 10px 80px 60px;
  .lawyer-intro--rates {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .item-content {
      margin-bottom: 10px;
    }
    .item-inner {
      display: flex;
      align-items: center;
      padding: 0 15px;
      font-size: 36px;
      color: #ccc;
      .item-title {
        font-size: 26px;
        color: #555;
        width: 140px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .starts {
        display: flex;
        align-items: center;
        .on {
          color: #ffcc00;
        }
        span {
          padding-left: 15px;
          font-size: 20px;
          color: #555;
        }
      }
    }
  }
  .lawyer-intro--tip {
    text-align: center;
    padding: 30px;
    font-size: 18px;
    color: #999;
  }
  .lawyer-intro--info {
    border-bottom: 1px solid #eee;
    text-align: center;
    padding: 0 0 20px;
    .name {
      font-size: 28px;
      color: #808080;
    }
    .tel {
      font-size: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 0;
      strong {
        padding-left: 15px;
        font-size: 48px;
        color: #3d69bd;
      }
    }
  }
}
</style>

<script>
import Menus from '../components/Menu'
import Dialogs from '../components/Dialog'
import Alert from '@/components/Alert'
import Rate from '../components/Rate'
import api from '../datas/api'
export default {
  data() {
    return {
      step: 0,
      residence: {},
      currentlawfirmlist: [],
      currentlawfirm: {},
      currentlawyerlist: [],
      currentlawyer: {},
      currentresidencecode: 0,
      currentresidencevalue: '',
      currentareacode: 0,
      searchlawfirm: '',
      checkedlawfirm: '',
      searchedlawfirm: [],
      search_flag: false,
      show_select_areacode: false,
      dialog: {
        maskClose: true,
        show: false
      },
      rate: {
        is_rate: false,
        lawyer_attitude: -1,
        lawyer_quality: -1
      },
      alert: {
        info: '',
        show: false,
        recall: () => {}
      }
    }
  },
  mounted() {
    let web_code = this.$root.config.web_code
    console.log(this.$root)
    this.getInitialItem(web_code)
  },
  methods: {
    updateRate() {
      const { lawyer_attitude, lawyer_quality, is_rate } = this.rate
      if (lawyer_attitude > 0 && lawyer_quality > 0 && !is_rate) {
        this.rate.is_rate = true
        this.alert = {
          show: true,
          info: '评价成功！',
          recall: this.closeRate
        }
      }
    },
    closeRate() {
      this.dialog.show = false
      this.rate = {
        is_rate: false,
        lawyer_attitude: -1,
        lawyer_quality: -1
      }
    },
    getLawyerTel() {
      this.dialog.show = true
    },
    goback() {
      if (this.step > 1) {
        this.step = 1
      }
    },
    changeResidence(key) {
      this.search_flag = false
      this.currentresidencecode = key
      if (key === this.currentareacode) {
        this.currentresidencevalue = this.$root.area[key].alias
      } else {
        this.currentresidencevalue = this.residence[key].name
      }
      this.getNewItem(key)
    },
    async getInitialItem(web_code) {
      this.$loading.show()
      this.currentresidencevalue = this.$root.area[web_code].alias
      this.currentresidencecode = web_code
      this.currentareacode = web_code
      if (Object.keys(this.residence).length) {  // 切换大地区时判断，不为空则先清空
        for (let key in this.residence) {
          delete this.residence[key]
        }
      }
      this.show_select_areacode = false
      for (let i in this.$root.area[web_code].children) {
        this.residence[i] = this.$root.area[web_code].children[i]
      }
      let data = await this.$get(api.lawfirm + web_code)
      this.currentlawfirmlist = data.result.data
      this.$loading.hide()
    },
    async getLawyer(lawfirm) {
      let data = await this.$get(api.employee + lawfirm.id)
      this.currentlawyerlist = data.result.data
    },
    async getNewItem(key) {
      this.$loading.show()
      if (key === '530100') {
        key = ''
      }
      let data = await this.$get(api.lawfirm + key)
      this.currentlawfirmlist = data.result.data
      this.$loading.hide()
    },
    async getSearchedLawFirm() {
      this.$loading.show()
      this.searchlawfirm = this.searchlawfirm.replace(' ', '')
      if (this.searchlawfirm.length > 1) {
        let reg = /[\u4e00-\u9fa5]/
        let info = this.searchlawfirm
        for (let char of this.searchlawfirm) {
          if (!reg.test(char)) {
            info = info.replace(char, '')
          }
        }
        if (info.length === 0) {
          return
        }
        this.search_flag = true
        this.searchedlawfirm.length = 0
        this.checkedlawfirm = info
        this.currentresidencecode = ''
        let data = await this.$get(api.lawfirm + this.$root.config.web_code)
        for (let i = 0; i < data.result.data.length; i++) {
          if (data.result.data[i].name.includes(this.checkedlawfirm)) {
            this.searchedlawfirm.push(data.result.data[i])
          }
        }
        this.currentlawfirmlist = this.searchedlawfirm
      }
      this.$loading.hide()
    },
    toLawfirmDetail(lawfirm) {
      this.step = 1
      this.currentlawfirm = lawfirm
      this.getLawyer(this.currentlawfirm)
    },
    toLawyerDetail(lawyer) {
      this.step = 3
      this.currentlawyer = lawyer
    }
  },
  watch: {
    searchlawfirm() {
      this.getSearchedLawFirm()
    }
  },
  components: {
    Menus,
    Dialogs,
    Rate,
    Alert
  }
}
</script>
<style lang="scss">
.lawFirm {
  background: #ddd;
  min-height: 100vh;
  .lawyer-list {
    margin-left: -15px;
    padding-bottom: 80px;
    .item {
      border: 1px solid #eee;
      padding: 25px;
      display: flex;
      margin-bottom: 30px;
      &:active {
        background: #f7f7f7;
      }
      .imgs {
        width: 72px;
        height: 72px;
        background-size: cover;
        background-position: center 0;
        flex-shrink: 0;
        border-radius: 50%;
        margin-right: 10px;
      }
      .lawyer-name {
        font-size: 18px;
        color: #333;
      }
      .lawyer-tell {
        font-size: 14px;
        color: #808080;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .lawyer-intro {
        font-size: 14px;
        color: #808080;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
  }
  .lawyer-about {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 159px;
    overflow-y: scroll;
    z-index: 2100;
    background: #ddd;
    .lawyer {
      .btn-zxls {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        font-size: 24px;
        margin: 40px 20% 0;
      }
      .content {
        margin: 100px 0 10px;
        border-radius: 5px;
        position: relative;
        border-bottom: 1px solid #ddd;
        .imgs {
          position: absolute;
          top: -75px;
          left: 50%;
          margin-left: -75px;
          width: 150px;
          height: 150px;
          border: 3px solid #fff;
          border-radius: 50%;
          background-size: cover;
          background-color: #fff;
          background-position: center 0;
          box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }
        .sc {
          background: #fff;
          padding: 35px;
          border-radius: 0 0 5px 5px;
          color: #808080;
          font-size: 20px;
          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              width: 50%;
              padding-bottom: 20px;
            }
          }
        }
        .tel {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px;
          border-radius: 0 0 5px 5px;
          color: #999;
          .icon {
            color: #4caf50;
          }
        }
      }
      .body {
        background: #fff;
        padding: 25px;
        min-height: 70px;
        color: #555;
        border-radius: 5px;
        margin: 15px 15px 80px;
        border-bottom: 1px solid #ddd;
        .ht {
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
          margin-bottom: 10px;
          font-size: 24px;
          font-weight: bold;
        }
        .detail {
          padding: 30px;
          font-size: 18px;
        }
      }
      .intro {
        padding: 105px 15px 50px;
        border-radius: 5px 5px 0 0;
        background: #1488cc; /* fallback for old browsers */
        background: -webkit-linear-gradient(
          to right,
          #2b32b2,
          #1488cc
        ); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(
          to right,
          #2b32b2,
          #1488cc
        ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        .name {
          display: block;
          text-align: center;
          color: #fff;
          font-size: 36px;
          margin-bottom: 5px;
        }
        .lawfir {
          padding-top: 10px;
          color: #fff;
          opacity: 0.6;
          text-align: center;
          font-size: 18px;
        }
        .rate {
          text-align: center;
          font-size: 24px;
          color: rgba(255, 255, 255, 0.2);
          .on {
            color: #fff100;
          }
          span {
            color: #fff;
            padding: 0 15px;
          }
        }
      }
    }
  }
  .lawfirm-about {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 159px;
    overflow-y: scroll;
    z-index: 2100;
    background: #ddd;
    .container {
      background: #fff;
      margin: 30px auto 80px;
      padding: 60px;
    }
    .ht {
      font-size: 32px;
      font-weight: bold;
      padding: 30px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 30px;
      text-align: center;
    }
    .detail {
      font-size: 18px;
      padding: 30px;
      p {
        margin-bottom: 20px;
      }
    }
  }
  .lawfirm-detail {
    .content {
      position: fixed;
      top: 159px;
      right: 0;
      bottom: 0;
      left: 30%;
      background: #fff;
      z-index: 2000;
      padding: 40px;
      overflow-y: scroll;
      font-size: 16px;

      .name {
        font-size: 28px;
        padding-bottom: 20px;
      }
      .more {
        padding: 20px 0;
      }
      .info {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        p {
          margin-bottom: 0;
        }
      }
      .ht {
        font-size: 20px;
        color: #555;
        line-height: 1;
        border-left: 5px solid #558ce1;
        padding-left: 10px;
        margin: 35px 0 15px;
      }
    }
    .contact {
      padding-bottom: 15px;
      border-bottom: 1px solid #ddd;
      div {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        span {
          color: #558ce1;
          display: inline-flex;
          align-items: center;
        }
      }
    }
    .mask {
      position: fixed;
      top: 158px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
  }
  .lawfirm-container {
    display: flex;
    height: 100vh;
    .left,
    .right {
      height: 100%;
      overflow-y: scroll;
      padding: 170px 0 20px;
    }
    .left {
      width: 25%;
      background: #fff;
    }
    .right {
      width: 75%;
    }
    .lawfirm-list {
      padding: 40px;
      .result-ht {
        font-size: 18px;
        padding-bottom: 20px;
        strong {
          color: red;
        }
      }
      .item {
        display: block;
        background: #fff;
        margin-bottom: 20px;
        padding: 25px 40px 25px 25px;
        font-size: 16px;
        color: #808080;
        border-radius: 5px;
        display: flex;
        align-items: center;
        &:active {
          background: #f7f7f7;
        }
        .content {
          flex: 1;
          .name {
            color: #555;
            font-size: 24px;
            padding-bottom: 10px;
          }
        }
        .glyphicon {
          flex-shrink: 0;
          font-size: 24px;
          color: #ddd;
        }
      }
    }
    .sider {
      .ht {
        padding: 20px;
        font-size: 24px;
        color: #808080;
      }
      .area-content {
        padding: 0 0 20px 20px;
        a {
          margin: 0 10px 10px 0;
        }
      }
      .search-content {
        padding: 0 20px;
        display: flex;
        input {
          border-radius: 6px 0 0 6px;
          border-right: 0;
        }
        .btn {
          flex-shrink: 0;
          border-radius: 0 6px 6px 0;
        }
      }
    }
  }
}
</style>
